import React from 'react'
import { Menu, ActivityIndicator, NavBar } from 'antd-mobile';
import {withRouter} from 'react-router-dom'
import {getflxq} from '../../api/index.js'    //引入获取商品分类详情


const data = [
  {
    value:'',
    label:'',
    children:[
      {
        label:'',
        value:'',
      }
    ]
  }
]


@withRouter
class MenuExample extends React.Component {
  constructor(...args) {
    super(...args);
    this.state = {
      id:'',
      initData: '',
      show: true,
      label:"分类"
    };
    this.myref11 =React.createRef();
  }

  componentDidMount(){  //调用获取分类的方法
    
    
    getflxq()
    .then((res)=>{
      let arr=[];
      var arr2=[];
      res.data.map((a,index)=>{
        // console.log(a,index)
        let arr3=[];
        a.sub_categories.map((b,index)=>{
          // console.log(b)
          var obj2={
            label:b.name,
            id:b.id,
            count:b.count,
            image_url:b.image_url,
            value:index+1
          }
          arr3.push(obj2)
          arr2=arr3
        })
        var obj={
          value:index+1,
          label:a.name,
          id:a.id,
          children:arr2
        } 
        // console.log(obj)
        arr.push(obj)
       
      })
      // console.log(arr)
      this.setState({
        initData:[...arr]
      })
    })
    
  

 }
  onChange = (value) => {
  //  console.log(value)
    setTimeout(()=>{
      
      this.props.dom.current.style.height="0"
    },20)
    let id = '';
    let label =""
    this.state.initData.forEach((dataItem) => {
      if (dataItem.value === value[0]) {
        id = dataItem.id;
        label=dataItem.label;
        if (dataItem.children && value[1]) {
          dataItem.children.forEach((cItem) => {
            if (cItem.value === value[1]) {
              id = ` ${cItem.id}`;
              label= ` ${cItem.label}`;
            }
          });
        }
      }
    });
    console.log(id)
    console.log(label)
   
    this.setState({
      id:id,
      label:label
    })
    // console.log()
    this.props.getlabel(this.state.label)
    // this.props.history.push({pathname:'/app/search',state:{id:id}})   //跳转页面
  
   this.props.sendlistid(this.state.id)
   
  }



 
  handleClick = (e) => {
    
    
    e.preventDefault(); // Fix event propagation on Android
   
    this.setState({
      show: !this.state.show,
    });
    // mock for async data loading
    // if (!this.state.initData) {
    //   setTimeout(() => {
    //     this.setState({
    //       initData: data,
    //     });
    //   }, 500);
    // }
  }

  onMaskClick = () => {
   
    this.setState({
      show: false,
    });
  }

  render() {
    const { initData, show } = this.state;
    // console.log(this.state.initData)
    const menuEl = (
      <Menu
        className="foo-menu"
        data={initData}
        // value={['1', '3']}
        onChange={this.onChange}
        height={document.documentElement.clientHeight * 0.6}
      />
    );
    const loadingEl = (
      <div style={{ width: '100%', height: document.documentElement.clientHeight * 0.6, display: 'flex', justifyContent: 'center' }}>
        <ActivityIndicator size="large" />
      </div>
    );
    return (
      <div className={show ? 'menu-active' : ''} ref={this.myref11}>
        <div>
          <NavBar
            leftContent="bug"
           
            mode="light"
            icon={<img src="https://gw.alipayobjects.com/zos/rmsportal/iXVHARNNlmdCGnwWxQPH.svg" className="am-icon am-icon-md" alt="" />}
            onLeftClick={this.handleClick}
            className="top-nav-bar"
          >
            
          </NavBar>


        </div>
        {show ? initData ? menuEl : loadingEl : null}
        {show ? <div className="menu-mask" onClick={this.onMaskClick} /> : null}
      </div>
    );
  }
}

export default MenuExample